<template>
    <div class="menu-management-container">
      <div class="menu-table">
        <el-card>
          <el-form inline :model="queryParams">
            <el-form-item label="菜单名称">
              <el-input v-model="queryParams.name" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryMenus">查询</el-button>
              <el-button type="primary" @click="savePermissions">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
  
        <el-table
          :data="roleList"
          stripe
          style="width: 100%; height: 650px; overflow-y: auto;"
          @row-click="handleRoleClick"
        >
          <el-table-column prop="name" label="角色名称" />
          <el-table-column prop="description" label="描述" />
        </el-table>
  
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
        
      </div>
  
      <div class="menu-tree">
        <MenuTrees :rolePermissions="rolePermissions" @update:rolePermissions="updateRolePermissions" />
      </div>
  
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import { ElMessage } from 'element-plus';
  import MenuTrees from './MenuTrees.vue';
  import request from '../utils/request';
  
  const treeData = ref<any[]>([]);
  const rolePermissions = ref<string[]>([]);
    const metadata = ref<string[]>([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  //const selectedRoleId = ref(null);
  
  const selectedRoleId = ref({
      id: '',
      name: '',
      description: '',
      status: '',
      type: '',
      department: '',
      category: '',
      level: '',
      permissions: '',
      metadata:'',
    });
  
  const queryParams = ref({
    name: '',
    page: 1,
    pageSize: 13,
  });
  const roleList = ref([]);
  
  /**
   * 点击角色时加载权限
   * @param {Object} row - 当前选中的角色行数据
   */
  const handleRoleClick = (row) => {
    
    // 设置当前选中的角色ID
    selectedRoleId.value = row;
    rolePermissions.value = JSON.parse(row.permissions.replace(/'/g, '"'));
    
  };
  
  // 更新角色权限
  const updateRolePermissions = (newPermissions,checkedKeyss) => {
    debugger;
    rolePermissions.value = newPermissions;
    metadata.value = checkedKeyss;
  
  };
  
  // 保存权限
  const savePermissions = async () => {
    if (!selectedRoleId.value) {
      ElMessage.error('请先选择一个角色');
      return;
    }
    selectedRoleId.value.permissions = JSON.stringify(rolePermissions.value);
    selectedRoleId.value.metadata = JSON.stringify(metadata.value);
  debugger;
    try {
      const response = await request.post('/sys/role/update', selectedRoleId.value );
      ElMessage.success('权限保存成功');
    } catch (error) {
      ElMessage.error('权限保存失败');
    }
  };
  
  // 获取角色列表
  const queryMenus = async () => {
    try {
      const response = await request.post('/sys/role/queryPage', queryParams.value);
      roleList.value = response.data.records;
      total.value = response.data.total;
    } catch (error) {
      console.error('获取角色列表失败:', error);
    }
  };
  
  const handleSizeChange = (newSize: number) => {
    debugger;
    pageSize.value = newSize;
    queryParams.value.pageSize = newSize;
    queryMenus();
  };
  
  const handleCurrentChange = (newPage: number) => {
    debugger;
    currentPage.value = newPage;
    queryParams.value.page = newPage;
    queryMenus();
  };
  
  onMounted(() => {
    queryMenus();
  });
  </script>
  
  <style scoped>
  .menu-management-container {
    display: flex;
    justify-content: space-between;
  }
  
  .menu-tree {
    width: 65%;
    height: 570px;
    overflow-y: auto;
    margin-left: 10px;
  }
  
  .menu-table {
    width: 35%;
    margin-left: 10px;
  }
  </style>
 
